<template>
  <div>
    <el-container stylle="height:100%">
      <div class="aside">
        <el-aside width="278px">
          <div class="asideDiv" style="text-align: center;">
            <el-button type="danger" @click="toDetail" plain icon="el-icon-user" circle style="height: 70px;width:70px;display: flex;
        align-items: center;
        justify-content: center;font-size:60px"></el-button>
          </div>
          <div class="asideDiv" >
            <el-button type="danger" @click="toTicket" plain icon="el-icon-s-ticket" circle style="height: 70px;width:70px;display: flex;
        align-items: center;
        justify-content: center;font-size:60px"></el-button>
          </div>
          <div class="asideDiv" >
            <el-button type="danger" @click="toBill" plain icon="el-icon-s-order" circle style="height: 70px;width:70px;display: flex;
        align-items: center;
        justify-content: center;font-size:60px"></el-button>
          </div>
          <div class="asideDiv">
            <el-button   type="danger" @click="toNotation" plain icon="el-icon-chat-line-round" circle style="height: 70px;width:70px;display: flex;
        align-items: center;
        justify-content: center;font-size:60px"></el-button>
          </div>
          <br>
          <div class="asideDiv">

          </div>


        </el-aside>
      </div>


      <el-container>
        <el-header style=" height:100px;background-color: honeydew">
          <h3>
            <el-button type="danger" @click="toIndexPage" icon="el-icon-back" circle style="height: 70px;width:70px;display: flex;
        align-items: center;
        justify-content: center;font-size:60px"></el-button>
          </h3>
        </el-header>
        <el-main>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>


</template>

<script>
export default {
  name: "PassengerCenter",

  data() {

  },
  mounted() {

  },
  stop() {//禁止页面滑动
    var mo = function (e) {
      e.preventDefault();
    };
    document.body.style.overflow = 'hidden';
    document.addEventListener("touchmove", mo, false);//禁止页面滑动
  },

  methods:{
    toTicket(){
      this.$router.replace('/passenger/myTicket')
    },
    toBill(){
      this.$router.replace('/passenger/myBill')
    },
    toNotation(){
      this.$router.replace('/passenger/myNotation')
    },
    toDetail(){
      this.$router.replace('/passenger/myDetail')
    },
    toIndexPage(){
      // this.$router.push('/indexPage');
      window.location.href="/"

    }

  }


}
</script>

<style scoped>

html, body, #app, .el-container {
  height: 100%;
}

.aside {
  height: 100%;
  width: 260px;
  background-color: white;
  overflow: hidden;
}

el-aside {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: antiquewhite;

}

.icon {
  font-size: 280px;
}

.size-icon {
  font-size: 250px;
}

.size-icon1 {
  font-size: 50px;
}

.asideDiv {
  margin:80px;

}

</style>


